<div class="d-flex w-full h-full">
  <mat-card class="m-auto" style="max-width: 380px">
    <mat-card-header class="m-b-24">
      <mat-card-title>👋 {{ 'login_title' | translate }}!</mat-card-title>
    </mat-card-header>

    <mat-card-content>
      <form class="form-field-full" [formGroup]="loginForm">
        <mat-form-field appearance="outline">
          <mat-label>{{ 'username' | translate }}: ng-matero</mat-label>
          <input matInput placeholder="ng-matero" formControlName="username" required />
          @if (username.invalid) {
            <mat-error>
              @if (username.errors?.required) {
                <span>
                  {{ 'please_enter' | translate }}
                  <strong>ng-matero</strong>
                </span>
              }
              @if (username.errors?.remote) {
                <span>{{ username.errors?.remote }}</span>
              }
            </mat-error>
          }
        </mat-form-field>

        <mat-form-field appearance="outline">
          <mat-label>{{ 'password' | translate }}: ng-matero</mat-label>
          <input
            matInput
            placeholder="ng-matero"
            type="password"
            formControlName="password"
            required
          />
          @if (password.invalid) {
            <mat-error>
              @if (password.errors?.required) {
                <span>
                  {{ 'please_enter' | translate }}
                  <strong>ng-matero</strong>
                </span>
              }
              @if (password.errors?.remote) {
                <span>{{ password.errors?.remote }}</span>
              }
            </mat-error>
          }
        </mat-form-field>

        <mat-checkbox formControlName="rememberMe">{{ 'remember_me' | translate }}</mat-checkbox>

        <button
          class="w-full m-y-16"
          mat-flat-button
          [disabled]="!!loginForm.invalid"
          [loading]="isSubmitting"
          (click)="login()"
        >
          {{ 'login' | translate }}
        </button>

        <div>
          <span>{{ 'have_no_account' | translate }}?</span>
          <a routerLink="/auth/register">{{ 'create_one_account' | translate }}</a>
        </div>
      </form>
    </mat-card-content>
  </mat-card>
</div>
